<template>
  <div class="app-container org">
    <el-card class="leftCard">
      <!-- 搜索条件盒子 -->
      <div>
        <p class="pinformation">搜索条件</p>
        <el-form :model="queryParams" ref="queryRef" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="方法编号：" prop="methodCode">
                <el-input
                  v-model="queryParams.methodCode"
                  maxlength="100"
                  placeholder="请输入方法编号"
                  clearable
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="方法状态：" prop="status" label-width="80px">
                <el-select
                  v-model="queryParams.status"
                  placeholder="请选择"
                  @change="handleQuery"
                >
                  <el-option
                    v-for="dict in proxy.addListNoLimit(lims_standard_status)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item
                label="方法名称："
                prop="methodName"
                label-width="80px"
              >
                <el-input
                  v-model="queryParams.methodName"
                  maxlength="100"
                  placeholder="请输入方法名称"
                  clearable
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-row justify="end">
                <el-button type="success" @click="handleQuery">搜索</el-button>
                <el-button class="business resetBtn" @click="resetQuery"
                  >重置</el-button
                >
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div>
        <el-row>
          <p class="pinformation">检测方法列表</p>
          <p class="totalStyle">共 {{ total }} 条数据</p>
          <el-row style="padding-bottom: 5px; margin-left: 15px">
            <!-- <el-button
              link
              type="success"
              icon="Refresh"
              @click="handleSynchronous"
              :loading="loadingBtn"
              >同步检测方法</el-button
            > -->
          </el-row>
        </el-row>

        <el-table
          ref="mainTableRef"
          class="business"
          v-loading="loading"
          :data="methodTable"
          :row-class-name="tableRowClass"
          @row-click="rowClick"
        >
          <el-table-column show-overflow-tooltip label="方法编号" align="center" prop="methodCode" width="150"/>
          <el-table-column show-overflow-tooltip label="方法名称" align="center" prop="methodName">
            <template #default="scope">
              <span v-html="proxy.getSupAndSub(scope.row.methodName)"></span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="状态" align="center" prop="status" width="85">
            <template #default="scope">
              <dict-tag
                :options="lims_standard_status"
                :value="scope.row.status"
              />
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>

    <el-card class="rightCard">
      <!-- 基础信息 -->
      <el-tabs v-model="activeName" @tab-change="tabchange">
        <el-tab-pane label="基础信息" name="first">
          <tab1
            v-if="activeName == 'first'"
            :queryParams="data.queryParams"
            :getDetectionMethod="getList"
            :handleQuery="handleQuery"
            ref="tab1Ref"
          />
        </el-tab-pane>
        <el-tab-pane label="原理与试剂" :disabled="tabDisable">
          <tab2 v-if="activeName == '1'" />
        </el-tab-pane>
        <el-tab-pane label="仪器设备" :disabled="tabDisable">
          <tab3 v-if="activeName == '2'" />
        </el-tab-pane>
        <el-tab-pane label="样品描述" :disabled="tabDisable">
          <tab4 ref="handleRef" v-if="activeName == '3'" />
        </el-tab-pane>
        <el-tab-pane label="分析步骤" :disabled="tabDisable">
          <tab5 v-if="activeName == '4'" />
        </el-tab-pane>
        <el-tab-pane label="结果表示" :disabled="tabDisable">
          <tab6 v-if="activeName == '5'" />
        </el-tab-pane>
        <el-tab-pane label="准确度" :disabled="tabDisable">
          <tab7 v-if="activeName == '6'" />
        </el-tab-pane>
        <el-tab-pane label="质控措施" :disabled="tabDisable">
          <tab8 ref="areaRef" v-if="activeName == '7'" />
        </el-tab-pane>
        <el-tab-pane label="单价" :disabled="tabDisable">
          <tab9 v-if="activeName == '8'" />
        </el-tab-pane>
      </el-tabs>
      <el-button
        size="small"
        type="success"
        class="back"
        v-if="back"
        @click="goBack"
        >返回</el-button
      >
    </el-card>
  </div>
</template>

<script setup name="Method">
import {
  listMethod,
  getMethod,
  delMethod,
  getInstMethod,
  getResult,
  getmethodStep,
  getmethodAccuracy,
  getSample,
  getmethodYlAndReagent,
  getmethodQc,
  getmethodDj,
  postMethod,
  getMethodStatus,
} from "@/api/store/method";
import tab1 from "./tab1";
import tab2 from "./tab2";
import tab3 from "./tab3";
import tab4 from "./tab4";
import tab5 from "./tab5";
import tab6 from "./tab6";
import tab7 from "./tab7";
import tab8 from "./tab8";
import tab9 from "./tab9";

import useMethodStore from "@/store/modules/method";
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const methodStore = useMethodStore();

const methodId = computed(() => methodStore.methodId);
const { lims_standard_status } = proxy.useShareDict("lims_standard_status");

const activeName = ref("first");
const loading = ref(true);
const ids = ref([]);
const multiple = ref(false);
const total = ref(0);
const methodTable = ref([]);
const tabDisable = ref(true);
const areaRef = ref(null);
const handleRef = ref(null);
const tab1Ref = ref(null);

const seisUseOrg = ref([
  { authId: -1, authName: "不限" },
  { authId: 1, authName: "是" },
  { authId: 0, authName: "否" },
]);
const subTable = ref([]);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    status: "1",
  },
});

const { queryParams } = toRefs(data);

/** 查询检测方法列表 */
function getList() {
  loading.value = true;
  listMethod(queryParams.value).then((response) => {
    methodTable.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

const id = ref("");

/** 修改按钮操作 */
function rowClick(row) {
  activeName.value = "first";
  nextTick(() => {
    tab1Ref.value.reset();
    getMethod(row.methodId).then((response) => {
      methodStore.setMethodForm(response.data);
      methodStore.setMethodId(response.data.methodId);
      heightBright.value = row.methodId;
      tableRowClass({ row });
      tabDisable.value = false;
    });
  });
}

function setMethodStore() {
  methodStore.setMethodForm({
    isAgree: 0,
    isUse: 0,
    status: 1,
    useTypeId: 0,
    handleJcxmList: [],
    fileList: [],
  });
  methodStore.setYlAndReagent({
    ylFileList: [],
    clFileList: [],
    grFileList: [],
  });
  methodStore.setInseForm({ instrumentList: [], yqFileList: [] });
  methodStore.setsampleForm({
    handleFileList: [],
    sampleList: [],
    handleDescList: [],
    fileList: [],
  });
  methodStore.setmethodStep({ curveFileList: [], stepFileList: [] });
  methodStore.setResultForm({
    ruleFileList: [],
    resultFileList: [],
    formulaList: [],
    ruleList: [],
  });
  methodStore.setaccuracyForm({ accuracyFileList: [], fileList: [] });
  methodStore.setmethodQcForm({ qcList: [], qcFileList: [] });
  methodStore.setmethodDjForm([]);
}

function tabchange(name) {
  setMethodStore();
  if (name == "first") {
    getMethod(methodId.value).then((res) => {
      methodStore.setMethodForm(res.data);
    });
  }
  if (name == "1") {
    getmethodYlAndReagent(methodId.value).then((res) => {
      methodStore.setYlAndReagent(res.data);
    });
  } else if (name == "2") {
    getInstMethod(methodId.value).then((res) => {
      methodStore.setInseForm(res.data);
    });
  } else if (name == "3") {
    getSample(methodId.value).then((res) => {
      methodStore.setsampleForm(res.data);
      if (handleRef.value) {
        handleRef.value.handleList();
      }
    });
  } else if (name == "4") {
    getmethodStep(methodId.value).then((res) => {
      methodStore.setmethodStep(res.data);
    });
  } else if (name == "5") {
    getResult(methodId.value).then((res) => {
      methodStore.setResultForm(res.data);
    });
  } else if (name == "6") {
    getmethodAccuracy(methodId.value).then((res) => {
      methodStore.setaccuracyForm(res.data);
    });
  } else if (name == "7") {
    getmethodQc(methodId.value).then((res) => {
      methodStore.setmethodQcForm(res.data);
    });
  } else if (name == "8") {
    getmethodDj({ methodId: methodId.value }).then((res) => {
      methodStore.setmethodDjForm(res.rows);
    });
  }
}

getList();

watch(
  () => total.value,
  () => {
    if (total.value) {
      heightParams.value = [{ tableName: "main", bottomHeight: 73 }];
    } else {
      heightParams.value = [{ tableName: "main", bottomHeight: 21 }];
    }
    getTableHeight();
  }
);

const heightParams = ref([{ tableName: "main", bottomHeight: 21 }]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(() => {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});

onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

const back = ref(false);
if (route.query.methodId) {
  let row = { methodId: route.query.methodId };
  rowClick(row);
  back.value = true;
}

watch(
  () => route.query.methodId,
  (val) => {
    if (route.query.methodId) {
      let row = { methodId: route.query.methodId };
      rowClick(row);
      back.value = true;
    } else {
      back.value = false;
    }
  }
);

function goBack() {
  proxy.$tab.closePage().then(() => {
    router.push({
      path: "/basic/standard",
    });
  });
}

let heightBright = ref("");

function tableRowClass({ row }) {
  if (row) {
    if (row.methodId == heightBright.value) {
      return "current-row";
    }
    return "";
  }
}

import { ElMessageBox } from "element-plus";
import { nextTick } from "vue";

// const loadingBtn = ref(false)
// function handleSynchronous() {
//   proxy.$modal
//     .confirm("确认要同步检测方法吗？")
//     .then(() => {
//       postMethod();
//       loadingBtn.value = true;
//       let timer = setInterval(() => {
//         getMethodStatus()
//           .then((res) => {
//             if (res.data == 2) {
//               clearInterval(timer);
//               loadingBtn.value = false;
//               getList();
//               ElMessageBox.alert("同步成功", "提示", {
//                 type: "success",
//               });
//             }
//           })
//           .catch(() => {
//             clearInterval(timer);
//             loadingBtn.value = false;
//             ElMessageBox.alert("同步失败", "提示", {
//               type: "error",
//             });
//           });
//       }, 5000);
//     })
//     .catch(() => {});
// }
</script>

<style scoped>
.back {
  position: absolute;
  top: 105px;
  right: 82px;
}
</style>
